
<template>
  <div class="power-detail">
    <!-- tab-->
    <div class="tab">
      <p>已完成<i class="active"></i></p>
      <p>进行中</p>
    </div>

    <!-- 新助力提醒-->
    <div class="remind">
      <div class="title">
        <b>新助力提醒</b>
        <p>12月12日 13:55</p>
        <p>新成交订单提醒！</p>
      </div>
      <div class="info">
        <label><i>订单编号：</i><p>454545454545</p></label>
        <label><i>订单时间：</i><p>2019-12-27 18:25</p></label>
        <label><i>状态：</i><p class="state">进行中</p></label>
        <label><i>备注：</i>
          <p>
            <span>产品：芭蕾舞表演服套装（产品总价：576）</span>
            <span>佣金：5.76 积分：5.76（交易成功后到账）</span>
            <span>订单来源：自己推广</span>
          </p>
        </label>
      </div>
    </div>
    <div class="remind">
      <div class="title">
        <b>新助力提醒</b>
        <p>12月12日 13:55</p>
        <p>新成交订单提醒！</p>
      </div>
      <div class="info">
        <label><i>订单编号：</i><p>454545454545</p></label>
        <label><i>订单时间：</i><p>2019-12-27 18:25</p></label>
        <label><i>状态：</i><p class="state">进行中</p></label>
        <label><i>备注：</i>
          <p>
            <span>产品：芭蕾舞表演服套装（产品总价：576）</span>
            <span>佣金：5.76 积分：5.76（交易成功后到账）</span>
            <span>订单来源：自己推广</span>
          </p>
        </label>
      </div>
    </div>
    <div class="remind">
      <div class="title">
        <b>新助力提醒</b>
        <p>12月12日 13:55</p>
        <p>新成交订单提醒！</p>
      </div>
      <div class="info">
        <label><i>订单编号：</i><p>454545454545</p></label>
        <label><i>订单时间：</i><p>2019-12-27 18:25</p></label>
        <label><i>状态：</i><p class="state">进行中</p></label>
        <label><i>备注：</i>
          <p>
            <span>产品：芭蕾舞表演服套装（产品总价：576）</span>
            <span>佣金：5.76 积分：5.76（交易成功后到账）</span>
            <span>订单来源：自己推广</span>
          </p>
        </label>
      </div>
    </div>

  </div>
</template>

<script>
  import nError from './../tpl/error'
  import menuTpl from './../tpl/menuTpl'
  export default {
    data(){
      return{}
    },
    created(){

    },
    methods:{
    },
    components:{
    }

  }
</script>

<style scoped lang="scss">
  .power-detail{
    width: 100%;
    height: 100%;

    /* tab*/
    .tab{
      padding: .2rem 0;
      display: flex;
      align-items: center;
      -webkit-align-items: center;
      justify-content: center;
      -webkit-justify-content: center;
      background: #fff;

      p{
        position: relative;
        padding: .3rem 0;
        flex: .3;
        text-align: center;

        .active{
          position: absolute;
          bottom: .15rem;
          width: 20%;
          height: .07rem;
          background: #f6a455;
          border-radius: .1rem;
          left: 50%;
          margin-left: -10%;
        }
      }
    }

    /* 新助力提醒*/
   .remind{
        margin-top: .25rem;
        padding: .3rem .5rem;
        color: #969896;
        background: #fff;

        .title{
          b{
            padding: .2rem 0;
            font-size: .5rem;
            font-weight: normal;
            display: block;
            color: #000;
          }

        }

        .info{
          margin-top: .25rem;

          label{
            margin-top: .05rem;
            display: flex;

            i{
              flex: .25;
              font-style: normal;
            }
            p{
              flex: .85;
              span{display: block}
            }
            .state{color: #df5000}
          }
        }
      }

  }
</style>
